<template>
    <view class="u-content pb-2">
        <uv-sticky class="bg-white">
            <view class="p-4">
                <uv-search placeholder="搜索..." :showAction="false" v-model="searchForm.search" clearabled
                    @search="onSearch"></uv-search>
            </view>
            <uv-tabs :activeStyle="{ color: themeColor }" :lineColor="themeColor" :list="tabs" @click="onTabChange"
                :current="curTab"></uv-tabs>
        </uv-sticky>
        <uv-list v-if="pagedList.rows.length" @scrolltolower="nextPage">
            <uv-list-item v-for="item in pagedList.rows" :key="item.id">
                <view class="bg-white shadow drop-shadow radius m-4 mb-5 p-4">
                    <view class="flex align-center">
                        <uv-icon name="question-circle" class="mr-2" size="18"></uv-icon>
                        <uv-text bold :text="item.question" size="16"></uv-text>
                    </view>
                    <uv-divider text=""></uv-divider>
                    <view class="flex align-start">
                        <uv-icon name="server-man" class="mr-2" size="18"></uv-icon>
                        <view class="text-gray">
                            <uv-text bold color="inherit" :text="item.answer"></uv-text>
                        </view>
                    </view>

                </view>
            </uv-list-item>
            <uv-load-more :status="listLoading" class="mt-4" v-if="!loading" />
        </uv-list>
        <uv-empty mode="list" icon="/static/empty/list.png" text="暂无数据" marginTop="55%" v-else>
        </uv-empty>
    </view>
</template>
<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import { onLoad, onReady, onShow, onPullDownRefresh } from '@dcloudio/uni-app';
import { getDictionaries } from '@/services/system';
import { list } from '@/services/question-answer';
import { themeColor, convertToJson, dateToTimeStamp } from '@/utils/index';

const curTab = ref(0)

const tabs = ref([])

const listLoading = ref('loading')
const loading = ref(true)

const searchForm = reactive({
    category: null,
    page: 1,
    limit: 10,
    search: '',
})

const pagedList = reactive({
    hasNextPage: true,
    totalItemCount: 0,
    rows: []
})

onLoad((options) => {
    // if (options.type >= 0) {
    //     searchForm.category = Number(options.type)
    // }
})

onReady(() => {
    loading.value = true
    getDictionaries({ search: '帮助类型', dropdown: true }).then(({ rows }) => {
        rows = [...[{ id: -1, name: '全部' }], ...rows]
        tabs.value = rows
        // let index = rows.findIndex(p => p.id == searchForm.type)
        onTabChange({ index: 0, id: -1 })
    }).catch(() => {

    })
})



onShow(() => {
    refresh()
})

const onSearch = () => {
    refresh()
}


onPullDownRefresh(() => {
    refresh()
})

const refresh = () => {
    searchForm.page = 1
    getList()
}


const onTabChange = ({ index, id }) => {
    curTab.value = index
    searchForm.category = id == -1 ? null : id
    refresh()
}



const nextPage = () => {
    if (!pagedList.hasNextPage) {
        return
    }
    searchForm.page++
    getList()
}

const getList = () => {
    listLoading.value = 'loading'
    list(searchForm).then(({
        rows,
        hasNextPage
    }) => {

        listLoading.value = hasNextPage ? 'loadmore' : 'nomore'
        pagedList.hasNextPage = hasNextPage
        if (searchForm.page == 1) {
            pagedList.rows = rows
        } else {
            pagedList.rows = [...pagedList.rows, ...rows]
        }

    }).catch(() => { }).finally(() => {
        setTimeout(() => {
            loading.value = false
        }, 1000)
        uni.stopPullDownRefresh()
    })
}
</script>